<template>
    <div>
        <h3>{{isNew ? '创建': "编辑"}}课程</h3>
        <ele-form
        :form-data="data"
        :form-desc="fields"
        :request-fn="submit"
        ></ele-form>
    </div>
</template>

<script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';

    @Component
    export default class CourseEdit extends Vue {
        @Prop(String) id!:string  //路由组件传参-对象模式
        data = {}

        fields = {
            name:{label:"课程名称",type:"input"},
            cover:{label:"课程封面",type:"input"}
        }

        get isNew(){
            return !this.id  
        }

        async fetch(){
            const res = await this.$http.get(`courses/${this.id}`)
            this.data = res.data
        }

        //@ts-ignore
        async  submit({name,cover}) {
            const url = this.isNew ? 'courses' : `courses/${this.id}`
            const method = this.isNew ? 'post' : 'put'
            await this.$http[method](url,{
                name,cover
            })
            this.data = {}
            this.$message.success('保存成功')
            this.$router.go(-1)
        }

        created(){
           !this.isNew &&  this.fetch()
        }
    }
</script>

<style scoped>

</style>